<template>
  <div class="m-menu">
    <dl class="nav" @mouseleave="mouseleave">
      <dt>全部分类</dt>
      <dd v-for="(item,index) in menu" :key="index" @mouseenter="mouseenter(item)">
        <i :class="item.type"></i>{{item.name}}<span class="arrow"></span>
      </dd>
    </dl>
    <div class="detail" v-if="kind" @mouseenter="sover" @mouseleave="sout">
      <template v-for="(item, index) in curdetail.child">
        <h4>{{item.title}}</h4>
        <span v-for="(items,indexs) in item.child" :key="indexs+60+items">{{items}}</span>
      </template>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      kind: ''
    }
  },
  computed: {
    curdetail () {
      const key = this.kind
      let ite = null
      this.menu.forEach(item => {
        if (item.type === key) {
          ite = item
        }
      })
      return ite
    },
    menu () {
      return this.$store.state.home.menu
    }
  },
  methods: {
    mouseleave () {
      this._timer = setTimeout(() => {
        this.kind = ''
      },150)
    },
    mouseenter (item) {
      this._settimer=setTimeout(() => {
        this.kind = item.type
      },100)
    },
    sover () {
      clearTimeout(this._timer)
      clearTimeout(this._settimer)
    },
    sout () {
      this.kind = ''
    }
  }
}
</script>
<style scoped lang="scss">
@import "../../assets/css/index/index";
</style>
